<template>
    <el-dialog :title="title" :visible.sync="visible" :width="width" :destroy-on-close="true">
        <MenuForm ref="realForm" @ok="submitCallback" @close="handleCancel" :disabled="disableSubmit" />
        <span slot="footer" class="dialog-footer" v-if="disableSubmit == false">
             <el-button @click="handleCancel">取 消</el-button>
             <el-button type="primary" @click="handleOk">确 定</el-button>
         </span>
         <span slot="footer" class="dialog-footer" v-else>
             <el-button type="primary" @click="handleCancel">关 闭</el-button>
         </span>
    </el-dialog>
</template>

<script>
    import MenuForm from './MenuForm.vue'

    export default {
        name: 'MenuDialog',
        components: {
            MenuForm
        },
        data() {
            return {
                title: '',
                width: '1000px',
                visible: false,
                disableSubmit: false,
                url: {
                    add: "/dangerous/dangerousSource/add",
                    edit: "/dangerous/dangerousSource/edit",
                    queryById: "/dangerous/dangerousSource/queryById",
                    hazardousChemicals: {
                        list: '/dangerous/dangerousSource/queryHazardousChemicalsByMainId'
                    },
                }
            }
        },
        methods: {
            add() {
                this.visible = true
            },
            edit(record) {
                this.visible = true
                this.$nextTick(() => {
                    this.$refs.realForm.edit(record);
                })
            },
            handleOk() {
                this.$refs.realForm.submitForm();
            },
            handleCancel() {
                this.$nextTick(() => {
                    this.$refs.realForm.resetForm();
                })
                this.visible = false;
            },
            submitCallback(){
              this.$emit('ok');
              this.visible = false;
            },
        }
    }
</script>

<style scoped>
</style>
